<template>
  <div class="staff-workload">
    <div class="header">
      <h1 class="page-title">接单员负载管理</h1>
      <p class="page-subtitle">查看和管理接单员的工作负载情况</p>
    </div>
    
    <div class="content">
      <el-card class="search-card">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="接单员姓名">
            <el-input v-model="searchForm.name" placeholder="请输入接单员姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="searchForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      
      <el-card class="table-card">
        <el-table :data="filteredStaffData" border style="width: 100%" v-loading="loading">
          <el-table-column prop="employeeId" label="员工ID" width="150"></el-table-column>
          <el-table-column prop="name" label="员工姓名" width="150"></el-table-column>
          <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
          <el-table-column prop="orderCount" label="未完成订单数" width="150"></el-table-column>
          <el-table-column prop="loadStatus" label="负载状态" width="120">
            <template #default="scope">
              <el-tag :type="getLoadStatusType(scope.row.loadStatus)">
                {{ scope.row.loadStatus }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="capacity" label="负载比例" width="150">
            <template #default="scope">
              <div class="capacity-container">
                <el-progress 
                  :percentage="scope.row.capacity" 
                  :status="getCapacityStatus(scope.row.capacity)"
                  :stroke-width="16"
                  :show-text="false"
                />
                <span class="capacity-text">{{ getCapacityEmoji(scope.row.capacity) }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getEmployeeLoadAPI } from '@/apis/employee.js'
import { getUserListAPI } from '@/apis/sys.js'

export default {
  name: 'StaffWorkload',
  data() {
    return {
      loading: false,
      searchForm: {
        name: '',
        phone: ''
      },
      staffData: [],
      allStaffData: [], // 存储所有数据
      allUsers: [] // 存储所有用户信息
    }
  },
  computed: {
    filteredStaffData() {
      return this.allStaffData.filter(item => {
        // 简单的前端过滤逻辑
        const matchesName = !this.searchForm.name || 
          (item.name && item.name.includes(this.searchForm.name));
        const matchesPhone = !this.searchForm.phone || 
          (item.phone && item.phone.includes(this.searchForm.phone));
        return matchesName && matchesPhone;
      });
    }
  },
  mounted() {
    this.fetchStaffData()
  },
  methods: {
    async fetchStaffData() {
      this.loading = true
      try {
        // 先获取所有用户信息
        const userRes = await getUserListAPI()
        if (userRes.code === 0) {
          this.allUsers = userRes.data || []
        } else {
          this.$message.error(userRes.msg || '获取用户列表失败')
          return
        }

        const params = {
          ...this.searchForm
        }
        
        const res = await getEmployeeLoadAPI(params)
        if (res.code === 0) {
          // 将返回的对象转换为数组格式，并结合用户详细信息
          this.allStaffData = Object.keys(res.data).map(employeeId => {
            const orderCount = res.data[employeeId]
            // 假设最大容量为10单
            const maxCapacity = 10
            const capacity = maxCapacity > 0 ? Math.round((orderCount / maxCapacity) * 100) : 0
            
            // 确定负载状态
            let loadStatus = '空闲'
            if (capacity > 100) {
              loadStatus = '超载'
            } else if (capacity > 70) {
              loadStatus = '繁忙'
            } else if (capacity > 30) {
              loadStatus = '正常'
            }
            
            // 查找员工详细信息
            const employee = this.allUsers.find(user => user.id == employeeId) || {}
            
            return {
              employeeId,
              name: employee.userName || employee.name || '未知',
              phone: employee.phone || '无',
              orderCount,
              loadStatus,
              capacity,
              maxCapacity
            }
          })
        } else {
          this.$message.error(res.msg || '获取数据失败')
        }
      } catch (error) {
        this.$message.error('获取数据时发生错误: ' + error.message)
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.fetchStaffData()
    },
    handleReset() {
      this.searchForm = {
        name: '',
        phone: ''
      }
      this.fetchStaffData()
    },
    getLoadStatusType(status) {
      switch (status) {
        case '空闲': return 'success'
        case '正常': return ''
        case '繁忙': return 'warning'
        case '超载': return 'danger'
        default: return ''
      }
    },
    getCapacityStatus(capacity) {
      if (capacity <= 30) return 'success'
      if (capacity <= 70) return ''
      if (capacity <= 100) return 'warning'
      return 'exception'
    },
    getCapacityEmoji(capacity) {
      if (capacity <= 30) return '😄' // 笑脸 - 空闲
      if (capacity <= 70) return '😊' // 微笑脸 - 正常
      if (capacity <= 100) return '😰' // 汗颜表情 - 繁忙
      return '😵' // 累死的表情 - 超载
    }
  }
}
</script>

<style scoped>
.staff-workload {
  padding: 20px;
  text-align: center;
}

.page-title {
  font-size: 2.2rem;
  color: #2c3e50;
  margin: 20px 0;
  text-align: center;
  font-weight: bold;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin-bottom: 30px;
  text-align: center;
}

.header {
  margin-bottom: 20px;
}

.content {
  text-align: left;
}

.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.table-card {
  margin-bottom: 20px;
}

.capacity-container {
  display: flex;
  align-items: center;
}

.capacity-text {
  margin-left: 10px;
  font-weight: bold;
  min-width: 40px;
  font-size: 18px;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 1.8rem;
  }
  
  .page-subtitle {
    font-size: 1rem;
  }
}
</style>